<template>
  <div id="content">
    <div id="container">
      <div id="output"></div>
    </div>
    <div class="tabs_wrap">
      <h4>阳曲县一体化抄表平台</h4>
      <form ref="formLogin" :model="formLogin" autocomplete="off">
        <el-input class="form_block" type="text" required name="userName" v-model="formLogin.userName"
          placeholder="请输入账号" id="userName" @keyup.enter.native="handleFocus"></el-input>
        <el-input class="form_block" type="password" required name="passWord" v-model="formLogin.passWord"
          placeholder="请输入密码" id="passWord" @keyup.enter.native="handleSubmit(formLogin)"></el-input>
        <div class="form_info">{{ info }}</div>
        <el-button class="form_btn" type="primary" @click="handleSubmit(formLogin)">登 录</el-button>
      </form>
    </div>
    <div class="copyright">
      Copyright &copy; 2020
      科技有限公司
    </div>


  </div>
</template>

<script>
  export default {
    layout: "layoutNo",
    data() {
      return {
        formLogin: {
          userName: "wangshulin", //tyyqbs
          passWord: "tyyqbs", //tyyqbs
          // groupName: 'meter' //sxtyyqbs
        },
        info: ""
      };
    },
    mounted() {
      this.getLoginBg();
    },
    methods: {
      handleFocus() {
        $("#passWord").focus();
      },
      handleSubmit(form) {
        let self = this;
        self.info = ""; //清空上次提示信息
        if (form.userName === "") {
          self.info = "请输入账号！";
        } else if (form.passWord === "") {
          self.info = "请输入密码！";
        } else if (form.userName !== "" && form.passWord !== "") {
          var passwd=hex_md5(form.passWord);
          const param = {
            userName: form.userName,
            passwd: passwd,
            // groupName: self.formLogin.groupName
          };
          self.$axios.post("/service/__login", param).then(res => {
            if (res.data.status !== "success") return (self.info = res.data.res);
            sessionStorage.setItem("name", res.data.name);
            sessionStorage.setItem("userName", form.userName);
            sessionStorage.setItem("suid", res.data.suid);
            sessionStorage.setItem("ttl", res.data.ttl);
            sessionStorage.setItem("mainUrl", res.data.mainUrl);
            self.$router.replace(sessionStorage.getItem("mainUrl"));
          });
        }
      },
      getLoginBg() {
        $(function () {
          // 初始化 传入dom id
          var victor = new Victor("container", "output");
          var color = ["#1890ff", "#002c4a"]
          victor(color).set();
        });
      }
    }
  };

</script>


<style scoped>
  .copyright {
    color: #fff;
    position: absolute;
    bottom: 80px;
  }

  #container {
    background:#106abb;
    position: absolute;
    height: 100%;
    width: 100%;
  }

  #output {
    width: 100%;
    height: 100%;
  }

  #content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    overflow: auto;
  }

  #content h4 {
    padding-top: 15%;
    font-weight: 400;
    font-size: 32px;
    text-align: center;
    /* color: #f2f2f2; */
  }

  #content .tabs_wrap {
    width: 500px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0 40px;
    border: 1px solid #2196F3;
    background: #fff;
    color: #333;
    box-shadow: 0 0 8px #666;
    /* background: radial-gradient(circle at center center,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)),
      radial-gradient(circle at center center,
        rgba(0, 164, 255, 0.4),
        rgba(0, 164, 255, 0.4));
    background-repeat: no-repeat;
    background-size: 100% 100%; */
    z-index: 99;
  }

  #content form {
    padding-top: 15%;
  }

  .form_block {
    margin-bottom: 10%;
  }

  .form_info {
    margin-bottom: 10%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    color: #ff4b4b;
  }

  #content form .form_btn {
    width: 100%;
    height: 40px;
    padding: 0;
    font-size: 16px;
    margin-bottom: 15%;
    margin-left: 0;
  }

</style>
